<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="帮助中心"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 帮助中心分类列表组件 -->
            <div
                class="list-item"
                v-for="(item,index) of helpList"
                :key="index"
                @click="goDetail(item.itemId)"
            >
                <span class="item-name">{{item.itemName}}</span>
                <img
                    class="item-more"
                    src="../../assets/images/helpCenter/more.png"
                />
            </div>
            <!-- 帮助中心分类列表组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'HelpList',
    components: {
        CommonHeader,
        CommonScroll
    },
    data () {
        return {
            scrollStyle: {
                top: "1.11rem",
                left: "0",
                right: "0",
                bottom: "0",
            },
            helpList: [
                {
                    itemName: '百领好货是什么？',
                    itemId: '1-1'
                },
                {
                    itemName: '百领好货的玩法？',
                    itemId: '1-2'
                },
                {
                    itemName: '百领好货的优势？',
                    itemId: '1-3'
                },
                {
                    itemName: '如何联系客服？',
                    itemId: '1-4'
                },
                {
                    itemName: '百领好货是什么？',
                    itemId: '1-1'
                },
                {
                    itemName: '百领好货的玩法？',
                    itemId: '1-2'
                },
                {
                    itemName: '百领好货的优势？',
                    itemId: '1-3'
                },
                {
                    itemName: '如何联系客服？',
                    itemId: '1-4'
                }
            ]
        }
    },
    methods: {
        goDetail (id) {
            this.$router.push(
                {
                    path: '/helpCenter/detail',
                    query: { itemId: id }
                }
            )
        }
    }
}
</script>

<style lang="stylus" scoped>
.list-item
    display flex
    align-items center
    justify-content space-between
    height 1.11rem
    padding 0 0.37rem
    background #fff
    border-bottom 1px solid #e5e5e5
    box-sizing border-box
    .item-name
        font-size 0.33rem
        color #333
    .item-more
        width 0.2rem
        height 0.28rem
.list-item:last-child
    border none
</style>


